<template>
  <div id="main">
      <h1 id='heard'>前段在途</h1>
      <table>
        <tr>
          <th>S/N</th>
          <th>指令号</th>
          <th>订单数</th>
          <th>运输模式</th>
          <th>起始地</th>
          <th>进度</th>
          <th>目的地</th>
          <th>超期状态</th>
        </tr>
        <tr v-for="(item,key) in dataBS">
            <td>{{key+1}}</td>
            <td>{{item.num}}</td>
            <td>{{item.wb}}</td>
            <td>{{item.type}}</td>
            <td>{{item.start}}</td>
            <td style="width: 30%">
                <percentage :pt="item.progress"></percentage>
            </td>
            <td>{{item.dest}}</td>
            <td>
              <two_status :st="item.status"></two_status>
            </td>

        </tr>
      </table>
  </div>
</template>

<script type="text/javascript">
    import  Vue from 'vue';
    import resource from 'vue-resource';
    import percentage from '@/globalComponents/percentage';
    import two_status from '@/globalComponents/two_status'
    export default {
        name: 'two',
        data() {
            return {
              dataBS : [
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.35',dest:'重庆库',status:1},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.68',dest:'重庆库',status:1},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.45',dest:'重庆库',status:2},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.89',dest:'重庆库',status:3},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.13',dest:'重庆库',status:2},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.99',dest:'重庆库',status:1},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.65',dest:'重庆库',status:3},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.23',dest:'重庆库',status:3},
                {num:'YKOOO1',wb:'10',type:'陆运',start:'南昌',progress:'0.78',dest:'重庆库',status:2}
                ]
            }
        },
        components:{
          percentage,
          two_status
        }
    }
</script>


<style scoped="true">
    html,body{
      height: 100%;
      width: 100%;
    }
    #heard{
      padding: 10px 0 20px 0;text-align: center
    }
    table{
      width: 100%;
      border-collapse:collapse;

    }
    th{
      background-color: #bdd7ee;
    }
    th,td{
      border-bottom: 1px solid #000;
      border-top: 1px solid #000;
      text-align: center;
      padding: 10px 0;
    }
</style>
